<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pa15">
					<view class="area_block_1 pa20" v-if="type == 2">
						<view class="flex_box">
							<view class="mr20 re">
								<image src="databaseinfo.headImgList[0]" class="img17 vt" mode="aspectFill">
								</image>
							</view>
							<view class="item">
								<view class="df hp100 jcsb fldc">
									<view class="fs28 lh36 cor_333 clamp_2">{{databaseinfo.title}}</view>
									<view class="fs22 cor_808">{{databaseinfo.introduce}}</view>
									<view class="flex_box aic">
										<view class="item fs34 fwb cor_F23">￥{{databaseinfo.price}}</view>
										<view class="fs22 fwb cor_808">{{databaseinfo.num}}人付款</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="area_block_1 pa20" v-if="type == 1">
						<view class="flex_box">
							<view class="mr20 re">
								<image src="="../../static/img1.png" class="img17 vt" mode="aspectFill"></image>
							</view>
							<view class="item">
								<view class="df hp100 jcsb fldc">
									<view class="fs28 lh36 cor_333 clamp_2">{{vipinfo.title}}</view>

									<view class="fs22 cor_808">{{vipinfo.introduce}}</view>
									<view class="flex_box aic">
										<view class="item fs34 fwb cor_F23">￥{{vipinfo.price}}</view>
										<!-- <view class="fs22 fwb cor_808">{{databaseinfo.num}}人付款</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="mt15 area_block_1" style="min-height: 804rpx;">
						<view class="scaley_1">
							<view class="pl25 pr45 flex_box aic h100">
								<view class="fs30 cor_000">请选择支付方式</view>
							</view>
						</view>
						<view class="scaley_1">
							<view class="pl25 pr45 flex_box aic h100" @click="paySel('0')">
								<view class="mr40 re">
									<image src="="/static/icon_Alipay.png" class="vt img21"></image>
								</view>
								<view class="item">
									<view class="fs30 cor_808">支付宝支付</view>
								</view>
								<image
									:src="payIndex == 0 ? '/static/icon_radio_1_2.png' : '/static/icon_radio_1_1.png'"
									class="ml15 img22"></image>
							</view>
						</view>
						<view class="scaley_1">
							<view class="pl25 pr4</image> c h100" @click="paySel('1')">
								<view class="mr40 re">
									<image src="="/static/icon_Wechat_payment.png" class="vt img21"></image>
								</view>
								<view class="item">
									<view class="fs30 cor_808">微信支付</view>
								</view>
								<image								:src="payIndex == 1 ? '/static/icon_radio_1_2.png' : '/static/icon_radio_1_1.png'"
									class="ml15 img22" </image>
							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 支付-按钮 -->
			<view class="consult_immediately_btn" @tap="payment">支付</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getDatumDetailPageApi,
		payOrderApi,
		getMemberKindsApi,
		getUserInfoApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				payIndex: 0, //默认0为支付宝支付
				title: '',
				id: 0,
				type: 1,
				//资料详情
				databaseinfo: {
					title: '',
					price: 0,
					id: 0,
					headImgList: [],
					num: 1
				},
				//vip详情
				vipinfo: {

				}
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync('userId')) {
				uni.navigateTo({
					url: '/pages/Sign_in/Sign_in'
				})
			}
			if (!options.type || !options.id || !options.title) {
				toast('参数不正确!');
				uni.navigateBack({
					delta: 1
				})
			}
			this.id = options.id;
			this.type = options.type;
			this.title = options.title;
			if (this.type == 2) {
				this.getDatumDetailPage();
			} else {
				this.getMemberKinds();
			}
		},
		methods: {
			getDatumDetailPage() {
				let that = this;
				showLoading('加载中...');
				getDatumDetailPageApi({
					id: this.id,
					userId: uni.getStorageSync('userId')
				}).then(res => {

					that.databaseinfo = res.data;
					hideLoading();
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},
			getMemberKinds() {
				let that = this;
				showLoading('加载中...');
				getMemberKindsApi({
					id: this.id,
					userId: uni.getStorageSync('userId')
				}).then(res => {

					for (let i in res.data) {
						if (res.data[i].id == that.id) {
							let vipinfo = {};
							vipinfo.price = res.data[i].amount;
							vipinfo.id = res.data[i].id;
							vipinfo.name = res.data[i].name;
							vipinfo.introduce = res.data[i].introduce;
							that.vipinfo = vipinfo;
						}
					}

					hideLoading();
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},
			paySel: function(index) {
				// console.log(index);
				this.payIndex = index
			},
			payment() {
				let that = this;
				let provider = 'alipay';
				let amount = 0; //价格
				let commodityId = ''; //商品ID
				let memberId = ''; //会员ID
				let payMode = 1; //支付方式 1支付宝2微信
				let orderInfo = '';
				if (this.payIndex == 1) {
					provider = 'wxpay';
					payMode = 2;
				}
				if (this.type == 2) {
					amount = that.databaseinfo.price;
					commodityId = that.databaseinfo.id;
				} else if (this.type == 1) {
					amount = that.vipinfo.price;
					memberId = that.vipinfo.id;
				}

				uni.showModal({
					title: '提示',
					content: '确定下单支付吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							payOrderApi({
								userId: uni.getStorageSync('userId'),
								amount: amount,
								memberId: memberId,
								commodityId: commodityId,
								payMode: payMode
							}).then(result => {
								if (that.payIndex == 0) {
									orderInfo = result.data.body
								} else {
									orderInfo = result.data
									console.log(result, 'aaaaaa');
								}

								uni.requestPayment({
									provider: provider,
									orderInfo: orderInfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
									success: function(payresult) {
										console.log('success:' + JSON.stringify(
											payresult));
										toast('支付成功！');
										// getUserInfoApi({
										// 	userId: uni.getStorageSync('userId')
										// }).then(infores=>{
										// 	uni.setStorageSync('phone', infores.data.phone);
										// 	uni.setStorageSync('userInfo', infores.data);
										// 	uni.setStorageSync('userId', infores.data.id);

										// }).catch(infoerr=>{
										// 	toast(infoerr.msg)
										// })
										uni.reLaunch({
											url: '/pages/personal_center/personal_center'
										})
										// uni.switchTab({
										// 	url: ''
										// })
									},
									fail: function(payerror) {
										console.log('fail:' + JSON.stringify(payerror));
									}
								});
							}).catch(error => {
								console.log(error)
								toast('支付信息获取失败！');
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}

		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		position: relative;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.h100 {
		height: 100rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}
</style>
